<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">会员查询</text>
      <button class="query-btn" @click="handleQuery">查询</button>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 姓名显示 -->
      <view class="info-item">
        <text class="info-label">姓名:</text>
        <text class="info-value">张三</text>
      </view>

      <!-- 扣除币种选择 -->
      <view class="form-item">
        <text class="form-label">扣除币种</text>
        <picker class="form-picker" mode="selector" :range="currencyList" :v-model="selectedCurrency">
          <view class="picker-text">{{ currencyList[selectedCurrency] }}</view>
        </picker>
      </view>

      <!-- 扣除数量输入 -->
      <view class="form-item">
        <text class="form-label">扣除数量</text>
        <input 
          class="form-input" 
          type="number" 
          placeholder="输入扣除数量" 
          v-model="deductAmount"
          placeholder-class="placeholder-style"
        />
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="btn-container">
      <button class="confirm-btn" @click="confirmDeduct">确认扣币</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 币种列表
      currencyList: ['预存款', '金币', '积分'],
      // 选中的币种索引
      selectedCurrency: 0,
      // 扣除数量
      deductAmount: ''
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.shangmengCoinDeduction')
  	});
  },
  methods: {
    // 处理查询
    handleQuery() {
      uni.showToast({
        title: '查询会员信息',
        icon: 'none'
      });
    },
    // 确认扣币
    confirmDeduct() {
      if (!this.deductAmount || this.deductAmount <= 0) {
        uni.showToast({
          title: '请输入有效的扣除数量',
          icon: 'none'
        });
        return;
      }
      
      uni.showToast({
        title: '扣币成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 顶部标题栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.title {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
}

.query-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 8rpx;
  text-align: center;
}

/* 内容区域 */
.content {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
}

/* 姓名信息项 */
.info-item {
  padding: 30rpx 0;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
}

.info-label {
  font-size: 32rpx;
  color: #333333;
  margin-right: 10rpx;
}

.info-value {
  font-size: 32rpx;
  color: #666666;
}

/* 表单项目样式 */
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #eeeeee;
}

.form-label {
  font-size: 32rpx;
  color: #333333;
  width: 160rpx;
}

/* 选择器样式 */
.form-picker {
  flex: 1;
  text-align: right;
}

.picker-text {
  font-size: 32rpx;
  color: #666666;
}

/* 输入框样式 */
.form-input {
  flex: 1;
  text-align: right;
  font-size: 32rpx;
  color: #333333;
  height: 40rpx;
  padding: 0;
  margin: 0;
  border: none;
}

.placeholder-style {
  color: #cccccc;
  font-size: 32rpx;
}

/* 按钮容器 */
.btn-container {
  padding: 40rpx 30rpx;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 34rpx;
  border-radius: 8rpx;
}
</style>